<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 阻止单击事件继续传播 -->
        <a v-on:click.stop="doThis">A-doThis</a>

        <!-- 提交事件不再重载页面 -->
        <form v-on:submit.prevent="onSubmit">
        <!-- 原来的会刷新页面（是同步操作，渴望执行跳转） -->
        <!-- <form> -->
            Form-onSubmit
            <button type="submit">Submit</button>
        </form>

        <!-- 修饰符可以串联 -->
        <a v-on:click.stop.prevent="doThat">A-doThat</a>

        <!-- 只有修饰符 -->
        <form v-on:submit.prevent>form-OnlyCapture</form>

        <!-- 添加事件监听器时使用事件捕获模式 -->
        <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
        <div v-on:click.capture="doThis">...doThis</div>

        <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
        <!-- 即事件不是从内部元素触发的 -->
        <div v-on:click.self="doThat">...doThat</div>

        <!-- 点击事件将只会触发一次 -->
        <a v-on:click.once="doThis"></a>

        <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
        <!-- 而“不会等待 `onScroll` 完成”  -->
        <!-- 这其中包含 `event.preventDefault()` 的情况 -->
        <div v-on:scroll.passive="onScroll">...</div>

        <input v-on:keyup.enter="submit">

        <input v-on:keyup.page-down="onPageDown">

        <!-- 请注意修饰键与常规按键不同，在和 keyup 事件一起用时，
            事件触发时修饰键必须处于按下状态。
            换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。
            而单单释放 ctrl 也不会触发事件。
            如果你想要这样的行为(只关注ctrl)，请为 ctrl 换用 keyCode：keyup.17。 -->

        <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
        <button @click.ctrl="onClick">A</button>

        <!-- 有且只有 Ctrl 被按下的时候才触发 -->
        <button @click.ctrl.exact="onCtrlClick">A</button>

        <!-- 没有任何系统修饰符被按下的时候才触发 -->
        <button @click.exact="onClick">A</button>

        <button @click.left="onLeft">Left</button>
        <button @click.right="onRight">Right</button>
    </div>
    <script src="vue.js"></script>
</body>
</html>